<!DOCTYPE html>
<html lang="en">

<head>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <title>商品卡-动效</title>
 <style>
  html,
  body {
   padding: 0;
   margin: 0;
   min-height: 2000px;
   background-color: antiquewhite;
  }

  .container {
   width: 1200px;
   margin: 0 auto;
  }

  a {
   color: black;
   text-decoration: none;
  }

  ul {
   list-style: none;
   margin: 50px 0 0 0;
   display: grid;
   grid-template-columns: repeat(4, 1fr);
   gap: 10px;
   padding: 0;
  }

  ul li {
   background-color: rgb(255, 255, 255);
   border: 1px solid #e4e4e4;
  }

  .product-container:before,
  .product-container:after,
  .product-container .border-left,
  .product-container .border-bottom {
   content: '';
   position: absolute;
   background-color: #ff0000;
   z-index: 1;
  }



  .product-container:before {
   top: 0;
   left: 0;
   width: 100%;
   height: 3px;
   transform-origin: top left;
   transform: scaleX(0);
   transition: transform 1s ease;
  }

  .product-container:after {
   bottom: 0;
   right: 0;
   width: 3px;
   height: 100%;
   transform-origin: bottom right;
   transform: scaleY(0);
   transition: transform 1s ease;
  }

  /* 左侧边框 */
  .product-container .border-left {
   content: '';
   position: absolute;
   top: 0;
   left: 0;
   width: 3px;
   height: 100%;
   transform-origin: left top;
   transform: scaleY(0);
   transition: transform 1s ease;
  }

  /* 底部边框 */
  .product-container .border-bottom {
   content: '';
   position: absolute;
   bottom: 0;
   right: 0;
   width: 100%;
   height: 3px;
   transform-origin: bottom right;
   transform: scaleX(0);
   transition: transform 1s ease;
  }

  .product-container:hover::before {
   transform: scaleX(1);
  }


  .product-container:hover::after {
   transform: scaleY(1);
  }


  .product-container:hover .border-left {
   transform: scaleY(1);
  }

  .product-container:hover .border-bottom {
   transform: scaleX(1);
  }

  ul li a {
   padding: 10px;
   display: block;
   text-decoration: none;
  }

  .product-container {
   position: relative;
  }

  .product-container .img {
   width: 100%;
   position: relative;
  }

  .product-container .img .productImg {
   transition: opacity 0.5s ease;
  }

  .product-container .img .qrcode {
   opacity: 0;
   position: absolute;
   left: 10px;
   /* 根据需要调整位置 */
   bottom: 10px;
   /* 根据需要调整位置 */
   transition: opacity 0.5s ease;
   z-index: 2;
   /* 确保二维码在图片上方 */
  }

  .product-container:hover .qrcode {
   opacity: 1;
  }

  .txt p {
   color: #666;
   font-size: 12px;
   line-height: 35px;
   overflow: hidden;
   text-wrap: nowrap;
  }

  .txt .sellinfo {
   display: grid;
   grid-template-columns: 1fr 1fr;
   place-content: center;
  }

  .txt .sellinfo div {
   place-self: center;
  }

  .txt .sellinfo .price {
   font-size: 14px;
   color: #000;
  }

  .txt .sellinfo .sell {
   color: #666;
   font-size: 13px;
  }

  .txt .btns {
   display: grid;
   grid-template-columns: 1fr 1fr;
   gap: 10px;
   margin-top: 15px;
   margin-bottom: 10px;
  }

  .txt .btns div {
   width: 100px;
   height: 30px;
   color: #fff;
   text-align: center;
   line-height: 30px;
   font-size: 12px;
  }

  .txt .btns .collect {
   background-color: #3f573f;
   place-self: end;
  }

  .txt .btns .addcart {
   background-color: #4cba6e;
  }
 </style>
</head>

<body>
 <section class="container">
  <ul>
   <li class="product-container">

    <div class="border-left"></div>
    <div class="border-bottom"></div>
    <a href="#">
     <div class="img">
      <img class="productImg" src="images/1.jpg" data-hover-src="images/2.jpg" alt="">
      <img class="qrcode" src="images/3.png" alt="">
     </div>
     <div class="txt">
      <p>大成户外餐桌露营折叠桌便携铝合金蛋卷桌野营桌摆</p>
      <div class="sellinfo">
       <div class="price">RMB 68.00</div>
       <div class="sell">已售1843笔</div>
      </div>
      <div class="btns">
       <div class="collect">收藏产品</div>
       <div class="addcart">立即下单</div>
      </div>
     </div>
    </a>
   </li>
   <li class="product-container">

    <div class="border-left"></div>
    <div class="border-bottom"></div>
    <a href="#">
     <div class="img">
      <img class="productImg" src="images/3.jpg" data-hover-src="images/4.jpg" alt="">
      <img class="qrcode" src="images/3.png" alt="">
     </div>
     <div class="txt">
      <p>户外折叠椅便携钓鱼凳露营椅月亮椅桌椅超轻折叠凳</p>
      <div class="sellinfo">
       <div class="price">RMB 38.00</div>
       <div class="sell">已售592笔</div>
      </div>
      <div class="btns">
       <div class="collect">收藏产品</div>
       <div class="addcart">立即下单</div>
      </div>
     </div>
    </a>
   </li>
  </ul>
 </section>
 <script>
  document.querySelectorAll('.product-container').forEach(container => {
   const productImg = container.querySelector('.productImg');
   const originalSrc = productImg.src; // 保存原始图片路径
   const hoverSrc = productImg.getAttribute('data-hover-src'); // 获取鼠标悬停时的图片路径

   container.addEventListener('mouseover', () => {
    productImg.src = hoverSrc; // 鼠标悬停时更改图片
   });

   container.addEventListener('mouseout', () => {
    productImg.src = originalSrc; // 鼠标离开时恢复原始图片
   });
  });


 </script>
</body>

</html>